<!--
 * @Description: Agreement popup component for displaying various agreements
 * @Date: 2023-11-04
-->
<template>
  <uni-popup ref="popup" type="center" :animation="true" @change="change">
    <view class="agreement-popup">
      <view class="agreement-header">
        <text class="agreement-title">{{ title }}</text>
        <view class="close-icon" @click="close">
          <image src="/static/images/gb.png" mode="aspectFit" class="close-image"></image>
        </view>
      </view>
      <scroll-view scroll-y="true" class="agreement-content">
        <rich-text :nodes="contentHtml"></rich-text>
      </scroll-view>
      <view class="agreement-footer">
        <view class="confirm-button" @click="close">
          <text class="confirm-text">确定</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'AgreementPopup',
  props: {
    title: {
      type: String,
      default: '协议内容'
    },
    contentHtml: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'usage' // usage, privacy, afterSale
    }
  },
  data() {
    return {};
  },
  methods: {
    open() {
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    change(e) {
      this.$emit('change', e);
    }
  }
};
</script>

<style lang="scss" scoped>
.agreement-popup {
  width: 650rpx;
  background-color: #FCF4E0;
  border-radius: 16rpx;
  overflow: hidden;
  border: 4rpx solid #FF9800;
}

.agreement-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20rpx 30rpx;
  position: relative;
  background-color: #FF9800;
  height: 80rpx;
}

.agreement-title {
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-shadow:
    0 0 2px #000,
    0 0 4px #000,
    0 2px 0 #000,
    2px 0 0 #000,
    0 -2px 0 #000,
    -2px 0 0 #000,
    2px 2px 0 #000,
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000;
}

.close-icon {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  right: 20rpx;
  top: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close-image {
  width: 40rpx;
  height: 40rpx;
}

.agreement-content {
  height: 720rpx;
  padding: 30rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;
  background-color: #FCF4E0;
  border-top: 2rpx dashed #E5D4AD;
  word-wrap: break-word;
  word-break: break-all;
  overflow-x: hidden;
  box-sizing: border-box;
}

.agreement-content ::v-deep rich-text {
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  box-sizing: border-box;
}

.agreement-content ::v-deep div {
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  box-sizing: border-box;
}

.agreement-content ::v-deep p {
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.agreement-footer {
  display: flex;
  justify-content: center;
  padding: 20rpx 30rpx 30rpx;
  background-color: #FCF4E0;
}

.confirm-button {
  width: 240rpx;
  height: 80rpx;
  background-color: #FF9800;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2rpx solid #E5D4AD;
}

.confirm-text {
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
}
</style> 